var MachineRepairQrcode = function () {
  var template = /* html */ `
    <div class="machine-repair-qrcode">
      <div v-if="isShow">
        <div ref="qrCode" style="display:none"></div>
      </div>
      <div v-if="imgSrc!==''" ref="qrImg" style="text-align:center">
        <img :src="imgSrc">
      </div>
    </div>
  `;

  return {
    props: {
      machine: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        isShow: true,
        imgSrc: ''
      };
    },

    mounted: function () {
      var qrCodeDom = this.$refs['qrCode'];
      if (qrCodeDom === undefined) {
        return;
      }

      var basePath = SysUtil.getBasePath();
      var id = this.machine.id;
      var origin = location.origin;

      new QRCode(qrCodeDom, {
        text: `${origin}${basePath}/workOrder/sqr?id=${id}`,
        width: 200,
        height: 200,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.L
      });

      var canvas = $(qrCodeDom).find('canvas').get(0);
      this.imgSrc = canvas.toDataURL('image/jpeg');
      this.isShow = false;
    },

    template: template
  };
}();
